<template>
  <div>
    <van-nav-bar
      title="去旅行"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="head_box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../../assets/stra.jpeg"/></van-swipe-item>
        <van-swipe-item><img src="../../assets/stra2.jpeg"/></van-swipe-item>
        <van-swipe-item><img src="../../assets/desc3.jpeg"/></van-swipe-item>
        <van-swipe-item><img src="../../assets/desc4.jpeg"/></van-swipe-item>
      </van-swipe>
    </div>
    <div class="sear_box">
      <p class="title">目的地</p>
      <div class="wz" @click="show=true">
        <p class="dest">
          <span v-if='address_name.length==0'>请选择目的地</span>
          <span v-else v-for="v in address_name">{{v}} </span>
        </p>
        <img src="../../assets/dw.png"/>
        <div style="clear:both"></div>
      </div>
    </div>
    <van-popup v-model="show"  position="bottom">
      <van-area title="选择目的地" :area-list="areaList" @cancel="show=false" @confirm="onAddress"/>
    </van-popup>
    <div class="btn">
      <button class="hotel_btn" @click="onSear">查找景点</button>
    </div>
    <div class="sear_list" v-if="sear_list">
      <van-card
        v-for="(v,k) in sear_list"
        :price="v.s_ticket"
        :desc="v.s_title"
        :title="v.s_name"
        :thumb="v.s_icon"
        @click="onChose(v.s_id)"
        :key="k"
      >
        <template #tags>
          <span v-for="(n,m) in v.s_addressName" style="font-size:26rem" :key="m">
            {{n}}
          </span>
        </template>
      </van-card>
    </div>
    <div class="sear_empty" v-else>
      <van-empty :description="tips" />
    </div>
  </div>
</template>

<script>
  import area from '../../js/area.js'
  export default{
    data(){
      return{
        address_name:[],
        show:false,
        areaList:area,
        sear_list:null,
        tips:'请选择您的目的地'
      }
    },methods:{
      onClickLeft:function(){
        this.$router.push({path:'/'});
      },
      onSear:function(){
        var that=this;

        if(this.address_name.length<3){
          return this.$toast.fail('请选择目的地');
        }

        var toast_load=this.$toast.loading({
          message: '查找中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/scenic/sear_btn',this.$qs.stringify({a_name:this.address_name})).then(
          (res)=>{
            if(res.data.code==1){
              toast_load.clear();

              that.sear_list=res.data.data.list;
            }else{
              that.sear_list=null;

              toast_load.clear();

              that.tips='未查询到该地区景点'
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙,稍后再试');
          }
        )
      },
      onAddress:function(arr){
        this.address_name=[];

        for(var i in arr){
          this.address_name.push(arr[i].name);
        }
        this.show=false
      },
      onChose:function(id){
        this.$router.push({path:'/scenic',query:{id:id}})
      }
    }
  }
</script>

<style scoped="">
  .van-card .van-card__title{
    font-size:32rem;
  }
  .van-card .van-card__desc{
    font-size:26rem;
  }
  .btn{
    margin:10rem 0;
  }
  .btn .hotel_btn{
    display: block;
    width: 90%;
    height: 100rem;
    margin: 0 auto;
    line-height: 100rem;
    background: -webkit-linear-gradient(136deg,#fdd133,#ffdb00);
    background: linear-gradient(314deg,#fdd133,#ffdb00);
    border-radius: 10rem;
    border: 0;
    color: #474747;
    font-size: 36rem;
    font-weight: 400;
    text-align: center;
  }
  .head_box{
    width:100%;
    height:340rem;
    margin:20rem 0;
  }
  .head_box img{
    width:100%;
    height:340rem;
  }
  .sear_box{
    padding:30rem 40rem;
  }
  .sear_box .title{
    font-size:28rem;
    color:#474747;
  }
  .sear_box .wz .dest{
    width:500rem;
    padding:20rem 0;
    font-size:38rem;
    color:#474747;
    border-bottom:1px solid #ccc;
    float:left;
  }
  .sear_box .wz img{
    width:65rem;
    height:65rem;
    float:left;
    margin:0 50rem;
  }
</style>
